import React, {Component, Fragment} from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';

function Login(props) {
    return (
        <div>我是登录页 欢迎 {props.name}</div>
    )
}
var arr = ['aa', 'bb', 'cc']
var arr2 = ['aa', 'bb', 'cc', 'dd']
class Loginc extends Component{
    constructor(props) {
        super(props)
        this.state = {
            cur: -1
        }
    }

    showList(arr) {
        return arr.map((item, index) => {
            return <li
                style={{color: this.state.cur == index? 'red': ''}}
                key={index}
                onClick={
                    ()=> {
                        this.setState({
                            cur: index
                        }, () => {
                            console.log('改变后', this.state.cur)
                        })
                        console.log('改变前', this.state.cur)
                    }
                }
            >{item}</li>

        })
    }
    render() {
        return (
            <Fragment>
                {this.props.name} 登录
                通过React.component创建
                <ul>
                    {this.showList(arr)}
                </ul>
                <Button type="primary">Button</Button>
            </Fragment>
        )
    }
}

export default Loginc